<template>
  <div class="friends-page">
    <div class="friends-top">
        <span class="friends-top_item">
          <img src="../assets/icon2/user.png" class="friends-top_img" alt="">
        </span>
      <span class="friends-top_item friends-top_center">
          <ul class="tab-title">
            <li @click="cur=0" :class="{active:cur==0}">动态</li>
            <li @click="cur=1" :class="{active:cur==1}">附近</li>
          </ul>
        </span>
      <span class="friends-top_item">
          <img src="../assets/icon/menu.png" class="friends-top_img2" alt="">
        </span>
    </div>

    <div class="nav">
      <div class="nav_tab">
        <div class="nav_tab_item">
          <img src="../assets/icon2/edit.png" class="dynamic-img img" alt="">
          发动态
        </div>
        <div class="nav_tab_item">
          <img src="../assets/icon2/videoCamera.png" class="video-img img" alt="">
          发布视频
        </div>
      </div>
    </div>
    <div class="main">
      <div class="tab-content">
        <!--        动态-->
        <div v-show="cur==0" class="tab_item">
          <div class="top">我关注的他们<img src="../assets/icon2/next.png" class="top-img"></div>
          <!--          关注列表-->
          <div class="dynamicList">
            <div class="dynamicList_item" v-for="(item, index) in friend" :key="index">
              <img :src="item.avatarUrl" alt="" @click="$router.push({ name: 'JokerXue', query:{ userId : item.userId }})">
              <span>{{item.nickname}}</span>
            </div>
          </div>
          <div class="dynamic_item" v-for="(item, index) in shareList" :key="index">
            <div class="dynamic_item_left">
              <img :src="videoUrl[index]" @click="$router.push({ name: 'JokerXue', query:{ userId : item.user.userId}})" class="imgAvatar" alt="">
            </div>
            <div class="dynamic_item_right">
             <p class="type">
               <span>
                 {{item.user.nickname}}
               </span> 发布视频:</p>
              <div class="time">10月18日</div>
              <div class="describe">{{message[index]}}</div>
              <div class="context_item">
                <video :poster="item.user.avatarUrl"
                       controls :src="urls[index]"
                       class="context_item" ></video>

              </div>
              <div class="aggregate">
                <div class="aggregate_item">
                  <img src="../assets/icon2/zan.png" alt="">
                  <span>
                    {{item.info.likedCount}}
                  </span>
                </div>
                <div class="aggregate_item">
                  <img src="../assets/video/pinglun.png" alt="">
                  <span>
                    {{item.info.commentCount}}
                  </span>
                </div>
                <div class="aggregate_item">
                  <img src="../assets/icon/share.png" alt="">
                  <span>
                    {{item.forwardCount}}
                  </span>
                </div>
                <div class="aggregate_item lastImg">
                  <img src="../assets/icon/more02.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--附近-->
        <div v-show="cur==1" class="tab_item">附近</div>
      </div>
    </div>

      <v-footer></v-footer>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
  import footer from "@/components/footer/"
  export default {
    name: "friend",
    data(){
      return {
        cur: 0, // 默认选中第一个tab
        id: this.$storage.get('user').account.id,
        shareList: [], // 分享列表
        message: [],
        videoUrl: [],
        datalist: [],
        urls: [],
      }
    },
    computed: {
      ...mapState(['friend'])
    },
    created() {

       //api 统一管理
      this.$api.getfriend({uid:this.id});

      this.$http.get('/api/event').then((res) => {

        this.shareList = res.data.event;
        this.shareList.forEach((item) => {

          if (JSON.parse(item.json).video) {
            const id = JSON.parse(item.json).video.videoId;
            this.message.push(JSON.parse(item.json).msg);
            // 视频描述
            this.videoUrl.push(JSON.parse(item.json).video.coverUrl);
            // 图片地址
            this.$http.get(`/api/video/url?id=${id}`).then((res2) => {
              this.datalist = res2.data.urls;
              this.datalist.forEach((item2) => {
                this.urls.push(item2.url);

              });

            });
          }

        });
      });
    },
    components: {

      'v-footer': footer,
    }
  }
</script>

<style scoped>
  ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .friends-page{
    width: 100vw;
  }
  .friends-top{
    width: 100vw;
    height: 50px;
    background-color: #C64B3D;
    color: #fff;
    font-size: 0;
    text-align: center;
    line-height: 50px;
    position: fixed;
    z-index: 2;
  }
  .friends-top_item{
    width: 50px;
    height: inherit;
    display: inline-block;
    float: left;
  }
  .friends-top_center{
    width: 270px;
    font-size: 18px;
    color: #fff;
  }
  .friends-top_img{
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 15px;
    margin-top: 12px;
    vertical-align: middle;
  }
  .friends-top_img2{
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  .tab-title{
    height: 30px;
    border: 2px solid #E0A29D;
    display: inline-block;
    margin-top: 8px;
    border-radius: 45px;
    font-size: 0;
  }
  .tab-title li{
    float: left;
    width: 70px;
    height: 30px;
    text-align: center;
    background-color:#C64B3D;
    border-radius: 45px;
    line-height: 30px;
    font-size: 15px;
  }
  /* 点击对应的标题添加对应的背景颜色 */
  .tab-title .active{
    background-color: #fff;
    color: #C2463A;
    line-height: 30px;
  }
  .nav{
    width: 100vw;
    height: 50px;
    background-color: #C84C3E;
    overflow: hidden;
    position: fixed;
    z-index: 2;
    top: 49px;
  }
  .nav_tab{
    width: 100vw;
    height: 40px;
    margin-top: 10px;
    display: flex;

  }
  .nav_tab_item{
    flex: 1;
    border-right: 1px solid #CD5A4F;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #fff;

  }
  .img{
    vertical-align: middle;
    margin-right: 8px;
  }
  .dynamic-img{
    width: 20px;
    height: 20px;
  }
  .video-img{
    width: 20px;
    height: 20px;
  }
  .tab_item{
    width: 100vw;
    color: #000;
  }
  .top{
    width: 100vw;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    box-sizing: border-box;
    font-size: 15px;
    margin-top: 10px;
  }
  .top-img{
    width: 8px;
    margin-left: 10px;
    vertical-align: middle;
  }
  .dynamicList{
    width: 100vw;
    height: 110px;
    overflow: hidden;
  }
  .dynamicList_item{
    width: 55px;
    height: 120px;
    display: inline-block;
    margin-left: 10px;
    font-size: 0;
  }
  .dynamicList_item img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .dynamicList_item span{
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #7D7D7E;
    font-size: 11px;
    display: inline-block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .main{
    width: 100vw;
    position: absolute;
    top: 100px;
    margin-bottom: 10px;
  }
  .dynamic_item{
    width: 100vw;
    height: 330px;
    border-top: 1px solid #E5E5E6;
  }
  .dynamic_item_left{
    width: 55px;
    height: 200px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
  }
  .dynamic_item_right{
    width: 290px;
    height: 200px;
    float: left;
  }
  .imgAvatar{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-top: 10px;
  }
  .type{
    color: #646566;
    height: 50px;
    line-height: 75px;
    font-size: 16px;
  }
  .type span{
    color: #6B89B3;
  }

  .time{
    font-size: 12px;
    color: #969798;
  }
  .context_item{
    width: 300px;
    height: 150px;
    border-radius: 5px;
    margin-top: 5px;
  }
  .describe{
    width: 98%;
    height: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 15px;
    margin-top: 10px;
  }
  .aggregate{
    width: 200px;
    height: 65px;
    line-height: 65px;
    display: flex;
  }
  .aggregate_item{
    flex: 1;
    width: 30px;
    height: 65px;
    font-size: 12px;
    color: #969798;
    margin-right: 60px;
    position: relative;
  }
  .aggregate_item img{
    width: 15px;
    vertical-align: initial;
  }
  .aggregate_item span{
    position: absolute;
    top: -3px;
    left: 20px;
  }
  .lastImg{
   margin-left: 55px;
    margin-top: -5px;
  }
</style>

